<template>
    <!-- 在模板中显示订单详情 -->
    <div v-if="wedding_order">
        <div class="head">
            <Card :bordered="false">
                <template #title>基本信息</template>
                 <Row>
                    <Col span="6">订单编号：{{wedding_order.order_sn}}</Col>
                    <Col span="6">订单状态：  <Tag color="success">{{wedding_order.status_text}}</Tag> </Col>
                    <Col span="6">客户姓名：{{wedding_order.wedding_user}}</Col>
                    <Col span="6">客户电话：{{wedding_order.wedding_phone}}</Col>
                 </Row>
                 <Row>
                    <Col span="6">婚礼日期：{{wedding_order.wedding_date}}</Col>
                    <Col span="6">客户地点：{{wedding_order.wedding_address}}</Col>
                    <Col span="6">总金额：{{wedding_order.total_price}}</Col>
                    <Col span="6">流程状态：  <Tag color="success">{{wedding_order.process_status}}</Tag> </Col>
                    <Col span="6"> <a color="blue" target="_blank" v-if="wedding_order.contract_url" :href="wedding_order.contract_url">合同链接</a></Col>
                   
                 </Row>
            </Card>
            <Card :bordered="false">
                <template #title>支付信息</template>
                 <Row v-if="wedding_order.deposit_order">
                    <Col span="6">定金订单：{{wedding_order.deposit_order?wedding_order.deposit_order.order_sn:''}}</Col>
                    <Col span="6">定金金额： ￥ {{wedding_order.deposit_order.pay_amount}}  </Col>
                    <Col span="6">支付状态：
                        <Tag color="error" v-if="wedding_order.deposit_order.pay_status ==0">未支付</Tag>
                        <Tag color="primary" v-else>已支付</Tag>
                    </Col>
                    <Col span="6">支付时间：{{wedding_order.deposit_order.pay_time}}</Col>
                 </Row>
                 <Row v-if="wedding_order.first_order">
                    <Col span="6">首付订单：{{wedding_order.first_order?wedding_order.first_order.order_sn:''}}</Col>
                    <Col span="6">定金金额： ￥ {{wedding_order.first_order.pay_amount}}  </Col>
                    <Col span="6">支付状态：
                        <Tag color="error" v-if="wedding_order.first_order.pay_status ==0">未支付</Tag>
                        <Tag color="primary" v-else>已支付</Tag>
                    </Col>
                    <Col span="6">支付时间：{{wedding_order.first_order.pay_time}}</Col>
                 </Row>
                 <Row v-if="wedding_order.final_order">
                    <Col span="6">尾款订单：{{wedding_order.first_order?wedding_order.final_order.order_sn:''}}</Col>
                    <Col span="6">定金金额： ￥ {{wedding_order.final_order.pay_amount}}  </Col>
                    <Col span="6">支付状态：
                        <Tag color="error" v-if="wedding_order.final_order.pay_status ==0">未支付</Tag>
                        <Tag color="primary" v-else>已支付</Tag>
                    </Col>
                    <Col span="6">支付时间：{{wedding_order.final_order.pay_time}}</Col>
                 </Row>
                
            </Card>
            <Card :bordered="false">
                <template #title>流程信息</template>
                <div>
                     <Timeline>
                        <TimelineItem  v-for="(item,index) in process_list" :key="index">
                            <template v-if="item.active == 1" #dot>
                                <Icon type="ios-checkmark-circle" />
                            </template>
                            <template v-else #dot>
                                <Icon type="ios-checkmark-circle-outline" />
                            </template>
                            <Tag color="default" v-if="item.process_status == 0">未提交</Tag>
                            <Tag color="warning" v-if="item.process_status == 1">待确认</Tag>
                            <Tag color="success" v-if="item.process_status == 2">已确认</Tag>
                            <Tag color="error" v-if="item.process_status == 3">已驳回</Tag>
                            <Tag color="magenta" v-if="item.process_status == 4">待支付</Tag>
                            <p class="time">{{item.update_time}}</p>
                            <p class="content">{{item.title}}</p>
                        </TimelineItem>
    
                    </Timeline>
                </div>
            </Card>
            <Card :bordered="false" v-if="wedding_order.design">
                <template #title>设计方案</template>
                 <Row >
                    <Col span="6">
                        <p>设计师：{{wedding_order.design.planner.user_name}}</p>
                    </Col>
                    <Col span="6">方案名称：{{wedding_order.design.title}}</Col>
                    <Col span="6">交付时间：{{wedding_order.design.delivery_time}}</Col>
                 </Row>
                 <Row style="margin:10px 0;">
                    <viewer>
                        <div class="tabBox_img">
                            <img v-for="(item,index) in wedding_order.design.design_imgs"  style="height: 100px;width:150px;margin-right: 10px;cursor: pointer;"  v-lazy="item" />
                        </div>
                    </viewer>
                   
                </Row>
                 <Row >
                    <p>方案说明：{{wedding_order.design.details}}</p>
                </Row>
             
            </Card>
            <Card :bordered="false" v-if="wedding_order.ordination">
                <template #title>统筹方案</template>
                 <Row >
                    <Col span="6">
                        <p>婚礼管家{{wedding_order.ordination.planner.user_name}}</p>
                    </Col>
                    <Col span="6">交付时间：{{wedding_order.design.delivery_time}}</Col>
                 </Row>
                 <Row style="margin:10px 0;">
                    <Col span="12">
                        <p>备婚手册</p>
                        <viewer>
                            <div class="tabBox_img">
                                <img   style="height: 100px;width:150px;margin-right: 10px;cursor: pointer;"  v-lazy="wedding_order.ordination.preparation_url" />
                            </div>
                        </viewer>
                    </Col>

                    <Col span="12">
                        <p>婚礼流程手册</p>
                        <viewer>
                            <div class="tabBox_img">
                                <img   style="height: 100px;width:150px;margin-right: 10px;cursor: pointer;"  v-lazy="wedding_order.ordination.process_file_url" />
                            </div>
                        </viewer>
                    </Col>
                   
                   
                </Row>

            </Card>
            <Card :bordered="false" v-if="wedding_order.consultation" style="line-height: 2.0;">
                <template #title>洽谈记录</template>
                 <Row >
                    <Col span="6">婚期：{{wedding_order.consultation.wedding_date}}</Col>
                    <Col span="6">酒店宴会厅：{{wedding_order.consultation.hotel_name}}</Col>
                    <Col span="6">宴会桌数量：{{wedding_order.consultation.banquet_table_count}}</Col>
                    <Col span="6">新人实际桌数：{{wedding_order.consultation.newcomer_seat_count}}</Col>
                 </Row>
                 <Row >
                    <Col span="24">
                        <p>新人故事和想法</p>
                         <p>{{wedding_order.consultation.couple_history}}</p>
                    </Col>
                 </Row>
                 <Row >
                    <Col span="6">需求设计区域:{{wedding_order.consultation.design_area}}</Col>
                    <Col span="6">新人不喜欢什么:{{wedding_order.consultation.couple_unlike}}</Col>
                    <Col span="6">新人自备项目:{{wedding_order.consultation.self_project}}</Col>
                    <Col span="6">新人喜欢元素道具:{{wedding_order.consultation.preference_items}}</Col>
                 </Row>
                 <Row >
                    <Col span="6">新人理想预算:{{wedding_order.consultation.estimated_budget}}</Col>
                    <Col span="6">预算上浮空间:{{wedding_order.consultation.reserved_budget}}</Col>
                    <Col span="6">婚礼主题色系:{{wedding_order.consultation.wedding_theme_color}}</Col>
                    <Col span="6">婚礼点缀色系:{{wedding_order.consultation.wedding_adorn_color}}</Col>
                 </Row>
                 <Row >
                    <Col span="6">婚礼硬件结构要求:{{wedding_order.consultation.cost_hardware}}</Col>
                    <Col span="6">硬件费用占比:{{wedding_order.consultation.cost_hardware_ratio}}</Col>
                    <Col span="6">花艺造型:{{wedding_order.consultation.cost_flower_design}}</Col>
                    <Col span="6">花艺费用占比:{{wedding_order.consultation.cost_flower_ratio}}</Col>
                 </Row>
                 <Row >
                    <Col span="6">广告材料:{{wedding_order.consultation.cost_ad_material}}</Col>
                    <Col span="6">广告材料费用占比:{{wedding_order.consultation.cost_ad_ratio}}</Col>
                    <Col span="6">灯光要求:{{wedding_order.consultation.cost_light}}</Col>
                    <Col span="6">灯光费用占比:{{wedding_order.consultation.cost_light_ratio}}</Col>
                 </Row>
                 <Row >
                    <Col span="6">酒店主舞台尺寸:{{wedding_order.consultation.stage_size}}</Col>
                    <Col span="6">宴会厅层高:{{wedding_order.consultation.banquet_height}}</Col>
                    <Col span="6">迎宾区宽度:{{wedding_order.consultation.welcome_area_width}}</Col>
                    <Col span="6">迎宾区层高:{{wedding_order.consultation.welcome_area_height}}</Col>
                 </Row>
                 <Row >
                    <Col span="6">大件道具:{{wedding_order.consultation.big_item}}</Col>
                    <Col span="6">小摆件:{{wedding_order.consultation.small_item}}</Col>
  
                 </Row>
                 <Row style="margin:10px 0;">
                    <Col span="24">
                        <p>场地实景图</p>
                        <viewer>
                            <div class="tabBox_img">
                                <img  v-for="(item,index) in wedding_order.consultation.scene_images"  style="height: 100px;width:150px;margin-right: 10px;cursor: pointer;"  v-lazy="item" />
                            </div>
                        </viewer>
                    </Col>

                
                   
                   
                </Row>

                <Row style="margin:10px 0;">
                 

                    <Col span="12">
                        <p>参考图</p>
                        <viewer>
                            <div class="tabBox_img">
                                <img  v-for="(item,index) in wedding_order.consultation.reference_images"  style="height: 100px;width:150px;margin-right: 10px;cursor: pointer;"  v-lazy="item" />
                            </div>
                        </viewer>
                    </Col>
                   
                   
                </Row>

            </Card>
        </div>
    </div>
    <div style="text-align: center;" v-else>
        <Spin />
    </div>
  </template>
  
  <script>
  import { orderDetail } from '@/api/wedding_order';
  
  export default {
    props: {
      id: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        loading: false,
        wedding_order: {},
        process_list : []
      };
    },
    methods: {
      // 获取订单详情
      async fetchOrderDetails() {
        if (!this.id) {
          console.error('无效的订单 ID');
          return;
        }
  
        this.loading = true;
        try {
          // 调用 API 获取订单详情
          const res = await orderDetail(this.id);
          this.wedding_order = res.data.wedding_order;  
          this.process_list = res.data.process_list;  
        } catch (error) {
          console.error('获取订单详情失败:', error);
        } finally {
          this.loading = false;
        }
      },
  
      // 返回上一页
      goBack() {
        this.$router.go(-1);
      }
    },
    watch: {
      // 监听 id 变化，重新获取订单详情
      id: 'fetchOrderDetails'
    },
    created() {
      // 组件创建时调用 fetchOrderDetails
    //   this.fetchOrderDetails();
    }
  }
  </script>
  
  <style scoped>
  /* 自定义样式 */
  </style>
  